<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>交易记录详情</title>
	<style>
		html,body{
			height: 100%;
		}
		.container{
			position: relative;
			height: 100%;
		}
		.wrapper{
			position: absolute;
			width: 100%;
			top: 50px;
		}
		.ul-list{
			margin-bottom: 0;
		}
	</style>
	<script>
	window.PointerEvent = void 0;
	</script>
</head>
<body>
	<header>
		<a href="javascript:void(0)" onclick="javascript:history.go(-1)" class="myleft"><i class=" glyphicon glyphicon-menu-left"></i>返回</a>
		<h3>查询明细</h3>
		<span class="myicon glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
	</header>
	<div class="container"> 
		<div class="row type-row">
			<div class="col-xs-4 col-md-4"><p>交易金额(元)</p></div>
			<div class="col-xs-4 col-md-4"><p>交易类型</p></div>
			<div class="col-xs-4 col-md-4"><p>余额(元)</p></div>
		</div>
		<div class="wrapper">
			<div class="iscroller">
				<ul class="list-group ul-list">
					<!-- <li class="list-group-item">
				    	<div class="row type-row list-row">
							<div class="col-xs-4 col-md-4"><p class="money-in">2668元</p></div>
							<div class="col-xs-4 col-md-4"><p>提现手续费</p></div>
							<div class="col-xs-4 col-md-4"><p>0.2元</p></div>
						</div>
						<div class="row type-row list-row list-user">
							<div class="col-xs-4 col-md-4"><p class="user-name">admin</p></div>
							<div class="col-xs-8 col-md-8"><p class="user-time">2018-01-06 15:42:36<span class="glyphicon"></span></p></div>
						</div>
						<div class="divbox">
							<p class="words-left">业务摘要：</p> <p class="words-right">消费</p>
							<p class="words-left">交易场所：</p> <p class="words-right">牛津堂</p>
							<p class="words-left">交易金额：</p> <p class="words-right">8元</p>
							<p class="words-left">可用金额：</p> <p class="words-right">0.2元</p>
							<p class="words-left">冻结金额：</p> <p class="words-right">0元</p>
							<p class="words-left">余额：</p> <p class="words-right">0.2元</p>
							<p class="words-left">交易币种：</p> <p class="words-right">人民币</p>
							<p class="words-left">交易流水号：</p> <p class="words-right">23390847</p>
						</div>
			    	</li> -->
			    	
			    </ul>
			    <div class="loading" id="PullUp">
					<span class="glyphicon glyphicon-refresh sxing"></span>
					<p class="pullUpLabel">正在加载数据</p>
				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="js/iscroll.js" ></script>
<script type="text/javascript" src="js/touch.js" ></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script>

/*数据模拟*/
var page1 =	{pageNo:0,pageSize:10,pageData:[
	{id:1,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:2,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'-8',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
	{id:3,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'-3065',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:4,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:5,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'888',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:6,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:7,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:8,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'360',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:9,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:10,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'} 
	
	]

}

var page2 =	{pageNo:1,pageSize:10,pageData:[
	{id:11,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:12,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
	{id:13,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'-760',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:14,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:15,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-530',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:16,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:17,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:18,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:19,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:20,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'} 
	]

}
	
var page3 = {pageNo:1,pageSize:10,pageData:[]};

window.onload=function () {

	/*通过JS来控制容器高度*/
	if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
	{ 
	winHeight = document.documentElement.clientHeight; 
	winWidth = document.documentElement.clientWidth; 
	} 
	var myHeight = winHeight - 100 ;
	$('.container').css("height",(myHeight-50) + "px");
	$('.wrapper').css("height",myHeight + "px");
	$('.sxing').hide();


	/*初始化分页数据*/
	var pageNo = 1;
	var pageSize = 10;


	if(pageNo == 1){
		var list = page1.pageData;
		if(list.length >= pageSize){
			thisPage(list);
		}else{
			$('#PullUp').hide(); 
		}	

	}


	function PageNum(){
		if(pageNo == 2){
			var list = page2.pageData;
			thisPage(list);
			myScroll.refresh();

		}

		if(pageNo == 3){
			var list = page3.pageData;
			thisPage(list);
			$('.pullUpLabel').html("没有更多数据");
			return;

		}
	}
	

	/*实例化IScroll对象*/
	var myScroll = new IScroll(".wrapper",{
		mouseWheel: true,
		click:true
	});

	function thisPage(list){
		for (var i = 0; i < list.length; i++) {
			var item = list[i];
			$('.wrapper .ul-list').append("<li class='list-group-item'><div class='row type-row list-row'><div class='col-xs-4 col-md-4'><p class='money-in'>+"+item.amount+"元</p></div><div class='col-xs-4 col-md-4'><p>"+item.action+"</p></div><div class='col-xs-4 col-md-4'><p>0.2元</p></div></div><div class='row type-row list-row list-user'><div class='col-xs-4 col-md-4'><p class='user-name'>admin</p></div><div class='col-xs-8 col-md-8'><p class='user-time'>"+item.createdAt+"<span class='glyphicon'></span></p></div></div><div class='divbox'><p class='words-left'>业务摘要：</p> <p class='words-right'>"+item.remark+"</p><p class='words-left'>交易场所：</p> <p class='words-right'>牛津堂</p><p class='words-left'>交易金额：</p> <p class='words-right'>8元</p><p class='words-left'>可用金额：</p> <p class='words-right'>0.2元</p><p class='words-left'>冻结金额：</p> <p class='words-right'>0元</p><p class='words-left'>余额：</p> <p class='words-right'>0.2元</p><p class='words-left'>交易币种：</p> <p class='words-right'>人民币</p><p class='words-left'>交易流水号：</p> <p class='words-right'>23390847</p></div></li>");		
		}
	}
	
	myScroll.on("scrollEnd",function(e){
		if(myScroll.maxScrollY == myScroll.y){
			pageNo++;
			PageNum();
			// setTimeout(function(){
			// 	$('.pullUpLabel').html("正在加载数据");
			// },2000);

			myScroll.refresh();
		}
	});

	$('.ul-list').on('click','.list-group-item',function(){
		$(this).find('.divbox').fadeToggle();
		$(this).find('.glyphicon').toggleClass("glyphicon-menu-up");
		console.log($(this));
	})
	
	

}




</script>
</html>